<template>
<div>
  <el-row :gutter="10">
    <el-col :span="16">
<el-tag>客户资料ID：{{this.bussignId}}</el-tag>
      <hr>
      <el-form ref="form" size="mini" :model="form" label-width="80px" :disabled="disabled" :rules="rules">
      <el-row>
        <el-col :span="8">
        <el-form-item label="客户姓名" prop="name">
          <el-input v-model="form.name" placeholder="请输入客户姓名"></el-input>
  </el-form-item>
      </el-col>
        <el-col :span="8">
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入手机号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="职业" prop="occupation">
            <el-select v-model="form.occupation" placeholder="请输入职业">
              <el-option v-for="item in dict.type.occupation" :label="item.label" value="item.value" :key="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="学历" prop="education">
              <el-select v-model="form.education" placeholder="请输入学历">
                <el-option v-for="item in dict.type.education" :label="item.label" :value="item.value" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="专业" prop="major">
              <el-select v-model="form.major" placeholder="请输入专业">
                <el-option v-for="item in dict.type.major" :label="item.label" :value="item.value" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="微信号" prop="weixin">
              <el-input v-model="form.weixin" placeholder="请输入微信号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="年龄" prop="age">
              <el-input v-model="form.age" placeholder="请输入年龄"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所在地区" prop="area">
              <el-cascader
                v-model="form.area"
                :options="provinceAndDataOptions"
                @change="handleChangeArea"
              >
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="在职情况" prop="job">
              <el-select v-model="form.job" placeholder="请输入在职情况">
                <el-option v-for="item in dict.type.job" :label="item.label" :value="item.value" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
        <el-col :span="8">
          <el-form-item label="当前薪资" prop="salary">
            <el-select v-model="form.salary" placeholder="请输入当前薪资">
              <el-option v-for="item in dict.type.salary" :label="item.label" :value="item.value" :key="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="qq" prop="qq">
            <el-input v-model="form.qq" placeholder="请输入qq"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="性别" prop="sex">
            <el-select v-model="form.sex" placeholder="请输入性别">
              <el-option v-for="item in dict.type.sys_user_sex" :label="item.label" :value="item.value" :key="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="目标薪资" prop="expectedSalary">
              <el-select v-model="form.expectedSalary" placeholder="请输入目标薪资">
                <el-option v-for="item in dict.type.salary" :label="item.label" :value="item.value" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="15">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" placeholder="请输入备注" type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-tag>客户意向</el-tag>
        <hr>
        <el-row>
          <el-col :span="8">
            <el-form-item label="意向学科" prop="subject">
              <el-select v-model="form.subject" placeholder="请输入意向学科" @change="handleChangeSubject" clearable>
                <el-option v-for="item in dict.type.course_subject" :label="item.label" :value="item.value" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="意向课程" prop="courseId">
              <el-select v-model="form.courseId" placeholder="请输入意向课程" clearable>
                <el-option v-for="item in this.coureseOptions" :key="item.id" :label="item.name" :value="item.id" @click.native="handleChangecourse(item)"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="意向金额" prop="price">
              <el-input readonly v-model="price" placeholder="请输入意向金额"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="学习原因" prop="reasons">
              <el-input v-model="form.reasons" placeholder="请输入学习原因"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="职业计划" prop="plan">
              <el-input v-model="form.plan" placeholder="请输入职业计划"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="计划时间" prop="planTime">
              <el-input v-model="form.planTime" placeholder="请输入计划时间"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="15">
            <el-form-item label="其他意向" prop="otherIntention">
              <el-input v-model="form.otherIntention" placeholder="请输入其他意向" type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-tag>添加跟进记录</el-tag>
        <hr>
        <el-row>
          <el-col :span="8">
            <el-form-item label="跟进状态" prop="trackStatus">
              <el-select v-model="form.trackStatus" placeholder="请输入跟进状态" clearable>
                <el-option v-for="item in dict.type.track_status" :key="item.value" :label="item.label" :value="item.value" @click.native="handleChangecourse(item)"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="下次跟进时间" prop="nextTime">
              <el-date-picker
                v-model="form.nextTime"
                type="datetime"
                placeholder="请选择下次跟进时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="沟通重点" prop="communicationPoints">
              <el-select multiple v-model="form.communicationPoints" placeholder="请输入沟通纪要" clearable>
                <el-option v-for="item in dict.type.communication_point" :key="item.value" :label="item.label" :value="item.value" @click.native="handleChangecourse(item)"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="15">
            <el-form-item label="沟通纪要" prop="record">
              <el-input v-model="form.record" placeholder="请输入沟通纪要"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row>
        <el-col :offset="10" :span="15">
          <el-button type="primary" @click="submitForm" v-if="!disabled && (business.status==1 || business.status==2)">保存</el-button>
          <el-button type="danger"  v-if="!disabled && (business.status==1 || business.status==2)" @click="giveback">踢回公海</el-button>
          <el-button type="success"  v-if="!disabled && (business.status==1 || business.status==2)" @click="transform">转成客户</el-button>
          <el-button type="info" @click="$emit('cancel')">取消</el-button>
        </el-col>
      </el-row>
    </el-col>
    <el-col :span="8">
      <track-list ref="trackList" :bussignId="bussignId" :key="tracklistKey" ></track-list>
    </el-col>
  </el-row>
  <give-back ref="givebackDialog" :businessId="bussignId" @success="ok"></give-back>
  <tran-form ref="tranFormDialog" :bussignId="bussignId" @success="ok">
  </tran-form>
</div>
</template>

<script>
  import {provinceAndCityData,CodeToText,TextToCode} from 'element-china-area-data'
  import {getBusiness,addBusiness} from "../../../api/crm/business";
  import {listCourse,getCourse} from '../../../api/crm/course'
  import {addbusinesstrack,giveBackBusiness} from '../../../api/crm/businesstrack'
  import {listRecord} from '../../../api/crm/record'
  import TrackList from '@/views/crm/business/tracklist'
  import TranForm from '@/views/crm/business/tran-fom'
  import GiveBack from "./give-back";
    export default {
        name: "track-index",
      props:{
          BussignId:{type:[String,Number]},
        view:{type:Boolean}
      },
      components:{GiveBack, TrackList,TranForm},
      dicts:['occupation','education','major','job','salary','sys_user_sex','course_subject','track_status','communication_point'],
      data(){
          return{
            disabled:false,
            componentKeys:{
              transformKey:0,
              giveBackKey:0
            },
            bussignId:this.BussignId,
            price:null,
            form:{
              //
              communicationPoints:[]
            },
            rules:{
              name:[{required:true,message:"客户名称不能为空",trigger:"blur"}],
              phone:[{required:true,message:"手机号不能为空",trigger:"blur"}],
              subject:[{required:true,message:"意向学科不能为空",trigger:"change"}],
              courseId:[{required:true,message:"意向课程不能为空",trigger:"change"}],
              trackStatus:[{required:true,message:"状态不能为空",trigger:"blur"}],
              communicationPoints:[{required:true,message:"沟通重点不能为空",trigger:"blur"}],
              record:[{required:true,message:"沟通纪要不能为空",trigger:"blur"}],
              nextTime:[{required:true,message:"下次跟进时间不能为空",trigger:"blur"}],
            },
            provinceAndDataOptions:provinceAndCityData,
            business:{},
            coureseOptions:[],
            tracklistKey:0,
          }
      },
      watch:{
        BussignId(newValue,oldValue){
          this.bussignId=newValue
            this.refreshData();
          },
        view:{
          handler:function(newValue,oldValue){
            this.disabled=newValue
          },
          immediate:true
        }
      },
      methods:{
          refreshData(){
            this.getBusiness()
            // this.getAssignRecord()
          },
       getBusiness(){
         getBusiness(this.bussignId).then(resp=>{
           this.business=resp.data
           this.form=this.business
           //根据学科id设置课程
           listCourse({subject:this.form.subject}).then(resp=>{
             this.coureseOptions=resp.rows;
           })
            //设置省市 将Text转成code
           if(this.form.provinces && this.form.city){
             this.form.area=[TextToCode[this.form.provinces].code,TextToCode[this.form.provinces][this.form.city].code]
           }
         })
         this.tracklistKey++;
       },
        //地区改变时
        handleChangeArea(value){
          if(value && value.length>0){
            this.form.provinces=CodeToText[value[0]]
            this.from.city=CodeToText[value[1]]

          }else {
            this.form.provinces=''
            this.form.city=''
          }
        },
        reset(){
            this.form={
              id:null,
              name: null,
              phone: null,
              channel: null,
              activityId: null,
              provinces: null,
              city: null,
              sex: null,
              age: null,
              weixin: null,
              qq: null,
              level: null,
              subject: null,
              courseId: null,
              occupation: null,
              education: null,
              job: null,
              salary: null,
              major: null,
              expectedSalary: null,
              reasons: null,
              plan: null,
              planTime: null,
              otherIntention: null,
              status: null,
              nextTime: null,
              lastUpdateTime: null,
              clueId: null,
              transfer: null,
              endTime: null,
              price:null
            }
        },
        submitForm(){
          this.$refs["form"].validate(valid =>{
            if(valid){
              //沟通要点
              this.form.keyItems=this.form.communicationPoints.join(",")
              addbusinesstrack(this.form).then(resp=>{
                this.$modal.msgSuccess("新增成功");
                this.refreshData();
                this.$emit("ok")
              })
            }
          })
        },
        //学科改变时 二级联动
        handleChangeSubject(value){
            this.form.courseId=null;
            this.price=null;
            listCourse({subject:value}).then(resp=>{
              this.coureseOptions=resp.rows;
            })

        },
        handleChangecourse(course){
        this.price=course.price
        },
        giveback(){
            this.$refs.givebackDialog.open=true
        },
        ok(){
          this.$emit("ok")
          this.refreshData()
        },
        transform(){
            this.$refs.tranFormDialog.open=true
        }
      },

      created() {
          this.reset();
        this.refreshData()
      },

    }
</script>

<style scoped>

</style>
